<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>maze</title>
    <script src="./Grid.js"></script>
    <style>
      .wall {
        background: grey;
      }
      .start {
        background: royalblue;
      }
      .exit {
        background: rgb(69, 219, 107);
      }
      .road {
        background: rgb(216, 216, 78);
      }
    </style>
  </head>
  <body>
    <div id="grid"></div>

    <script>
      // 0:start,1:wall,2:road,3:exit
      let itemArr = [[0, 1, 1], [2, 1, 1], [2, 2, 3]];
      let grid = new Grid({
        container: document.getElementById("grid"), // 必须项
        colCount: 3,
        rowCount: 3,
        width: 600,
        height: 600
      });
      let grids = grid.getGrids();
      let rowCount = grid.rowCount;
      for (let y = 0; y < itemArr.length; y++) {
        for (let x = 0; x < itemArr[y].length; x++) {
          // 封装的grid数组是一个一维数组
          let item = grid.getGrid(x + y * rowCount);
          console.log(item);
          switch (itemArr[y][x]) {
            case 0:
              item.setAttribute("class", "start");
              break;
            case 1:
              item.setAttribute("class", "wall");
              break;
            case 2:
              item.setAttribute("class", "road");
              break;
            case 3:
              item.setAttribute("class", "exit");
              break;
            default:
              item.setAttribute("class", "wall");
              break;
          }
        }
      }
      for (let i = 0; i < grids.length; i++) {
        grids[i].innerHTML = i + 1;
      }
    </script>
  </body>
</html>
